<template>
	<view class="expressage">
		  <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="purple"></uni-segmented-control>
		  <!-- 墨榜 -->
		  <view class="list" v-if="current===0">
			    <!-- <view>墨榜</view> -->
				<MoBang></MoBang>
		  </view>
		  <!-- 墨单 -->
		  <view class="form" v-else-if="current===1">
			    <MoDan></MoDan>
		  </view>
		  <!-- 已接单 -->
		  <view class="doing" v-else>
			 <DoingList></DoingList>
		  </view>
	</view>
</template>

<script setup>
import {ref} from "vue"
const current=ref(0)
const items=ref(["墨榜","墨单","已接单"])
const onClickItem=(e)=>{
	
	current.value=e.currentIndex;
	console.log(current.value);
}
</script>

<style lang="scss" scoped>
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
}
.expressage{
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	padding:10rpx ;
}
</style>
